<template>
    <ul class="productList">
        <li v-for="dt in lists" :key="dt.orderNo">
            <div class="status">
                <label>{{dt.createTime}}</label>
                <span v-if="dt.orderStatus && type!=2">状态：
                    <template v-if="!dt.isPay && mt.diff(dt.limitPayEndTime)<0">已关闭</template>
                    <template v-else>{{dt.orderStatus.message}}</template>
                </span>
            </div>
            <a @click="goDetail(dt)">
                <div class="imgbbox">
                    <Image :url="dt.goodsHeadImage"/>
                </div>
                <div class="listTxt">
                    <div class="orderNo">订单编号：{{dt.orderNo}}</div>
                    <!-- <div class="introduce">
                        “蒙娜丽莎”（Mona Lisa）是意大利文艺复兴时期画家列奥纳多·达·芬奇创作的画艺复兴时期画家列奥纳
                    </div> -->
                    <p>
                        数量*{{dt.quantity}}
                        <template v-if="dt.goodsAttr">  /  {{dt.goodsAttr}} </template>
                    </p>
                    <div v-if="dt.totalAmount" class="price">¥<em>{{dt.totalAmount.decimalTwoString}}</em></div>
                </div>
            </a>
            <div class="oprate" v-if="!dt.isPay && mt.diff(dt.limitPayEndTime)>0">
                <div class="op1">&nbsp;</div>
                <div class="btnBox">
                    <div class="countdown">
                        剩余 <count-down style="display: inline-flex" v-if="dt.limitPayEndTime" :type="2" :dataTime="dt.limitPayEndTime"/>
                    </div>
                    <div class="btn" @click.stop="goPay(dt)">立即付款</div>
                </div>
            </div>
        </li>
    </ul>
    <pay-type v-model:show="showPayType" @change="creade_pay_order"/>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import Image from '@/components/image.vue'
import { mt } from '@/utils/common'
import countDown from '@/components/countDown.vue'
import payType from '@/components/payType.vue'
import { toast,H5CallAPPFuction } from '@/utils/common'
export default {
    props:{
        lists:Array,
        type:Number  // 为2表示是详情数据
    },
    components:{
        Image,
        countDown,
        payType
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            showPayType:false,
            itemData:""
        })

        onMounted(()=>{
            // 定义payResult方法，供app调用(app支付完成调用)
            window['payResult'] = function (status,msg) {
                // data为App传递过来的值
                //alert('app调用H5成功，参数为：'+status)
                if(status==1){
                    router.push('/pay/success')
                }else{
                    router.push(`/pay/fail?msg=${JSON.stringify(msg) || ''}`)
                } 
            }
        })

        const goDetail = o=>{
            router.push(`/home/order/${o.orderId}`) 
        }

        const goPay = (item)=>{
            state.itemData = item
            state.showPayType = true
            //creade_pay_order(item.payOrderNo,item.payType.code)
        }

        // 创建支付订单，获取支付参数
        const creade_pay_order = async (payType)=>{
            const res = await store.dispatch('arApi/creade_pay_order',{
                payOrderNo:state.itemData.payOrderNo,  // 支付订单号
                payType: payType, // 支付类型（微信支付 WECHAT_PAY，支付宝 ALIPAY）	
                //requestIp: "192.168.3.112", // 	用户IP
                returnUrl: "https://www.tst.metayuanjie.com/api/union/callback/pay/appPay", // 页面回执地址
                subPayType: "APP", // 	支付唤起方式 H5 APP APPLET 小程序 默认APP
                //userId: "" // 用户标识: 对应微信的openid或者支付宝的userId
            })
            if(res.success){
                // 把参数给app，用于呼起支付
                const appParams = {payType,...res.data}
                try {
                    H5CallAPPFuction('payOrder',JSON.stringify(appParams))  // 调用app的payOrder方法，传入支付参数
                } catch (error) {
                    toast('调用app失败')
                }
                state.showPayType = false
                
            }else{
                 toast(res.message)
            }
        }

        return{
            ...toRefs(state),
            goDetail,
            mt,
            goPay,
            creade_pay_order
        }
    }
}
</script>

<style lang="scss" scoped>
    .productList{
        list-style: none;
        padding: 0;
        padding-bottom: 0;
        margin: 0;
        font-size: 26px;
        li{   
            width: 100%;
            margin: 0 0 30px 0;
            padding: 0 0 30px 0;
            border-bottom:1px solid rgba(255, 255, 255, 0.2); ;
            .status{
                display: flex;
                padding: 0 0 20px 0;
                label{
                    flex: 1;
                    font-weight: normal;
                    color: rgba(255, 255, 255, 0.5);
                }
            }
            a{
                display: flex;
                max-height: 255px;
                width: 100%;
                padding: 0;
                .imgbbox{
                    display: block;
                    width: 140px;
                    height: 140px;
                }
                .listTxt{
                    flex: 1;
                    padding: 0 0 0 20px;
                    width: 0;
                    .orderNo{
                        
                        line-height: normal;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;
                    }
                    p{
                        height: 36px;
                        line-height: 36px;
                        color: #fff;
                        margin: 10px 0 0 0;
                        width: 100%;
                        overflow:hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .introduce{
                        max-height: 72px;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 0.5);
                        line-height: 36px;
                        margin: 10px 0 0 0;
                        overflow : hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                    .price{
                        line-height: normal;
                        font-size: 26px;
                        color: var(--baseColor);
                        font-weight: 500;
                        margin: 12px 0 0 0;
                        text-align: right;
                        em{
                            font-size: 36px;
                            font-style: normal;
                            padding: 0 0 0 5px;
                        }
                    }
                }
            }
            .oprate{
                display: flex;
                overflow: hidden;
                padding: 0;
                margin: 25px 0 0 0;
                .op1{
                    flex: 1;
                }
                .btnBox{
                    display: flex;
                    justify-content:end; 
                    align-items: center;  
                    .countdown{
                        padding: 0 20px 0 0;
                    }
                    .btn{
                        width: 140px;
                        height: 48px;
                        line-height: 48px;
                        background: rgba(214, 53, 53, 0.8);
                        border-radius: 32px 32px 32px 32px;
                        font-weight: bold;
                        text-align: center;
                        &:hover{
                            background: rgba(214, 53, 53, 0.5);
                        }
                    }
                }
                
            }
        }
    }
</style>